//注意: 该文件必须使用 commonJS 语法
//导入path模块
const path = require("path");
// 导入ESLint插件
const ESLintPlugin = require("eslint-webpack-plugin");
// 导入打包 HTML 的插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//暴露一个对象
module.exports = {
  //入口
  entry: "./src/js/main.js",
  //出口
  output: {
    // path: __dirname + '/build', //这个路径必须是绝对路径
    path: path.resolve(__dirname, "./build"), //这个路径必须是绝对路径   更为标准一些
    filename: "js/bundle.js", //设置输出的文件名
    clean: true, // 清空
    publicPath: "/", // 这个配置目前不是必做项
  },
  //模式
  mode: "development",
  //配置 loader
  module: {
    //模块
    rules: [
      //规则
      // 针对 css 文件配置
      {
        test: /\.css$/, //测试 检测   scss
        use: [
          "style-loader", // 将 commonJS 模块生成 style 标签插入到文档中
          "css-loader", // css-loader 的作用将 css 内容转为 commonJS 模块
        ],
      },
      //针对 less 文件的配置
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          "less-loader", // less-loader 将 less 编译为 css 的.  loader 的执行顺序是由下向上的
        ],
      },
      //添加 babel 配置
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              [
                "@babel/preset-env",
                {
                  useBuiltIns: "usage", // 只打包使用的ES6新API的实现代码
                  corejs: { version: 2 }, // 指定core-js的版本号为2
                },
              ],
            ],
            plugins: [], // 指定babel插件包
          },
        },
      },
      //图片的处理
      {
        test: /\.(jpg|png|gif)$/,
        type: "asset", // asset
        // 解析器
        parser: {
          // 指定进行图片base64编码最大文件大小
          dataUrlCondition: {
            maxSize: 2 * 1024, // 5kb  尺寸的阈值    默认8k
          },
        },
        // 打包生成的文件
        generator: {
          filename: "images/[hash:8][ext]",
        },
      },
      //html loader 配置用来打包 img 标签对应的图片
      {
        test: /\.(html)$/,
        use: {
          loader: "html-loader",
        },
      },
      //字体文件的处理
      {
        test: /\.(eot|svg|woff|woff2|ttf)$/,
        type: "asset",
        // 解析器
        parser: {
          // 指定进行base64编码最大文件大小
          dataUrlCondition: {
            maxSize: 3 * 1024, // 5kb
          },
        },
        generator: {
          filename: "fonts/[hash:8][ext]",
        },
      },
    ],
  },
  // 配置进行ESlint检查的插件
  plugins: [
    new ESLintPlugin(),
    //HtmlWebpackPlugin 除了打包 HTML 之外, 会自动将最终的 JS 文件通过 script 的形式插入到文档中
    new HtmlWebpackPlugin({
      template: "./public/index.html", // 指定html模板文件。
      inject: "body", // 将打包生成的JS文件放置在body尾部
      hash: true, // 在引入JS时增加hash后缀字符串,去除缓存。
      minify: {
        removeAttributeQuotes: true, // 移除属性中的双引号
        removeComments: true, // 移除注释
        collapseWhitespace: true, // 去除空格与换行
      },
    }),
  ],
  // 配置开发服务
  devServer: {
    port: 3000, // 设置端口号
    open: true, // 自动在浏览器中打开页面
    // 默认项  根目录 public
  },
  //开发工具   source 资源   map 映射   本身是一个资源映射文件
  // devtool: 'source-map'
  devtool: 'cheap-module-source-map' //开发模式选择它,  生产模式直接删除该配置
};
